<template>
	<view class="container">
		<view class="tui-order-list pad30">
			<!-- <tui-list-cell padding="0" backgroundColor="#00000000" unlined :hover="false">
				<view class="tui-cell-header">
					<view class="tui-cell-title">订单列表</view>
				</view>
			</tui-list-cell> -->
			<block v-for="(item, orderIndex) in orderList" :key="orderIndex">
				<view class="tui-order-item" @click="detail(item)">
					<!-- <tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-goods-title">
						<view>订单号：T201910000</view>
						<view class="tui-order-status">已取消</view>
					</view>
				</tui-list-cell> -->
					<!-- <block v-for="(item,index) in 1" :key="index"> -->
					<tui-list-cell padding="0">
						<view class="tui-goods-item">
							<image :src="item.avatar" class="tui-goods-img">
							</image>
							<view class="tui-goods-center">
								<view class="tui-good-info">
									<view class="tui-goods-name">{{item.shopName}}</view>
									<tui-tag margin="0 0 0 20rpx  " padding="8rpx" size="24rpx" type="light-orange">
										{{item.levelName}}
									</tui-tag>
								</view>

								<view class="tui-goods-attr">电话：{{item.phone}}</view>
								<view class="tui-goods-attr">地址：{{item.shopAddress}}</view>
							</view>
							<view class="tui-price-right">
								<view class="tui-order-status"
									:class="item.status === 0 ?'font-color-theme':'font-color-main'">{{getStatus(item)}}
								</view>
								<view class="tui-price-num font-color-red pt10">￥{{item.amount}}</view>
								<view class="tui-price-num font-color-red">￥{{item.salesmanCom}}</view>
							</view>
						</view>
					</tui-list-cell>
					<!-- </block> -->

					<!-- <view class="tui-order-bottom">
						<view class="tui-btm-item">
							<view class="tui-order-btm-num">3</view>
							<view class="tui-order-btm-text">完成率</view>
						</view>
						<view class="tui-btm-item">
							<view class="tui-order-btm-num">44</view>
							<view class="tui-order-btm-text">绩效</view>
						</view>
					</view> -->
				</view>

			</block>

		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#fafafa"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	const STATUS = ['待付款', '待发货', '待收货', '已送达']

	import {
		getMerchantOrderList
	} from '@/apis/user'
	export default {
		data() {
			return {
				id: 0,
				orderList: [],
				pageNum: 1,
				pageSize: 10,
				loadding: false,
				pullUpOn: true
			}
		},
		mounted() {
			this.id = this.$yroute.query.id;
			// console.log("onload .....")
			this.doGetBusinessOrderList();
		},
		methods: {
			doGetBusinessOrderList: function() {
				let that = this;
				getMerchantOrderList(that.id, that.pageNum, that.pageSize).then(
					res => {
						console.log(res)
						if (that.pageNum === 1) {
							that.orderList = [];
						}
						that.orderList = that.orderList.concat(res.rows)
						that.pageNum++;
						//是否可以加载更多
						that.pullUpOn = that.orderList.length < res.total
						//正在加载
						that.loading = false

					}
				)
			},
			getStatus(order) {
				return STATUS[order.status]
			},

		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			console.log("onPullDownRefresh")
			this.pageNum = 1;
			uni.stopPullDownRefresh();
			// let options = {
			// 	msg: "刷新成功",
			// 	duration: 2000,
			// 	type: "translucent"
			// };
			this.doGetBusinessOrderList();

		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			console.log("business onReachBottom")
			if (this.pullUpOn) {
				this.doGetBusinessOrderList();
			}
		},
		
	}
</script>

<style>
	.tui-order-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-order-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-cell-header {
		width: 100%;
		height: 74rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-cell-title {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: 600;
		color: #333;
	}

	.tui-order-item {
		width: 100%;
		margin-top: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background: #fff;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-order-status {
		color: #333;
		font-size: 26rpx;
	}

	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-center {
		flex: 1;
		padding: 10rpx 14rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 32rpx;
		color: #333;
	}

	.tui-goods-attr {
		font-size: 24rpx;
		color: #999;
		line-height: 32rpx;
		padding-top: 10rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-good-info {
		width: 100%;
		display: flex;
	}

	.tui-goods-img {
		width: 120rpx;
		height: 160rpx;
		display: block;
		flex-shrink: 0;
		border-radius: 10rpx;
	}

	.tui-order-bottom {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin: 24rpx;
		justify-content: space-between;
		background: #F7FDF7;
		border-radius: 12rpx;
	}

	.tui-order-btm-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tui-order-btm-num {
		font-size: 36rpx;
		font-weight: 600;
		position: relative;
		color: #333;
		margin-top: 24rpx;
	}

	.tui-order-btm-text {
		font-size: 24rpx;
		opacity: 0.85;
		padding-top: 11rpx;
		margin-bottom: 24rpx;
		color: #999;
	}
</style>
